/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-08-19 10:51:50
 * @filename : src/components/myProfileHead.js
 * @version : 
 * @description : 
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';

let { width, height } = Utils.size;
import NetWorkImg from '../common/networkImg';

class MyProfileHead extends Component {

    constructor(props) {
        super(props);
        SceneObj.MyProfileHead = this;
        Share.regResponder('photo','MyProfileHead')
        this.state = {};
    }

    responseRender(type) {
        //console.log('MyProfileHead');
        this.forceUpdate();
    }

    render() {
        return (
    	    <View style={styles.myProfileHead}>
                <View style={styles.myProfileIconBox}>
                    <NetWorkImg
                        source={this.getPhoto()} 
                        style={styles.myProfileIcon}
                        loadSize={'small'}
                    />
                </View>
                <View style={styles.myProfileHeadInfo}>
                    <View style={styles.myProfileUsername}>
                         <Text style={styles.myProfileUsernameText}>{this.getName()}</Text>
                         {this.getGold()}
                         <Image style={styles.editIcon} source={require('../img/edit.png') } />
                    </View>
                    <View>
                         <Text style={styles.myProfileLocation}>{this.getLocation()}</Text>
                    </View>
                </View>
            </View>
        );
    }

    getName() {
        let userObj = JSON.parse(Store.session_user_id);
        return userObj.account.username;
    }

    getPhoto() {
        let userObj = JSON.parse(Store.session_user_id);
        let img = userObj.pictures.length > 0 ? userObj.pictures[0].icon :null;
        return Share.defalutPhoto(userObj.account.gender,img);     
    }

    getGold() {
        let userObj = JSON.parse(Store.session_user_id);
        let jsx = null;
        if(userObj.status.isGuest = 1){
            jsx = 
            <Image style={styles.userNavGoldIco} source={require('../img/gold_ico.png') } />
        }
        return (jsx);
    }

    getLocation() {

        let userObj = JSON.parse(Store.session_user_id),info = '';
        
        if (userObj.account.age) {
            info += userObj.account.age+' ● ';
        }

        if (userObj.account.city) {
            info += userObj.account.city +' , ';
        }

        if (userObj.account.state_name)  {
            info += userObj.account.state_name +' , ';
        }

        if (userObj.account.country_name) {
            info += userObj.account.country_name;
        }

        return info;
    }

}

const styles = StyleSheet.create({
    myProfileHead: {
        height:100,
        width:width,
        flexDirection: 'row',
    },

    myProfileIconBox: {
        width:120,
        height:100,
        alignItems: 'center',
        justifyContent: 'center',
    },

    myProfileIcon: {
        width:70,
        height:70,
        borderRadius:35,
    },

    myProfileHeadInfo: {
        flex:1,
        height:100,

        justifyContent: 'center',
        overflow:'hidden',
    },

    myProfileUsername: {
        flexDirection: 'row',
    },

    myProfileUsernameText: {
        fontSize:16,
        color:'#333',
        height:25,
    },

    userNavGoldIco: {
        width:16,
        height:16,
        borderRadius:8,
        marginLeft:5,
    },

    myProfileLocation: {
        color:'#888',
    },

    editIcon: {
        width:15,
        height:15,
        position:'absolute',
        right:15,
    },
});

export default MyProfileHead;

